<template>
  <div>
  <v-menu v-if=" ui === 'menu' " ref="page" lazy :close-on-content-click="false" v-model="page"
          transition="scale-transition" offset-y full-width :nudge-right="40" min-width="290px"
          :return-value.sync="vdate" :rules="rules">
    <v-text-field slot="activator" :label="title" v-model="vdate" prepend-icon="event" readonly></v-text-field>
    <v-date-picker v-model="vdate" no-title scrollable locale="zh-cn">
      <v-spacer></v-spacer>
      <v-btn flat color="primary" @click="page = false, clearDate()">清空</v-btn>
      <v-btn flat color="primary" @click="page = false">取消</v-btn>
      <v-btn flat color="primary" @click="saveDate()">确定</v-btn>
    </v-date-picker>
  </v-menu>
  <v-dialog v-if=" ui === 'dialog' " ref="page" v-model="page" :return-value.sync="vdate" persistent lazy full-width width="296px">
    <v-text-field slot="activator" v-model="vdate" label="计划日期" prepend-icon="event" readonly
                  :rules="rules"></v-text-field>
    <v-date-picker v-model="vdate" scrollable locale="zh-cn">
      <v-spacer></v-spacer>
      <v-btn flat color="primary" @click="page = false, clearDate()">清空</v-btn>
      <v-btn flat color="primary" @click="page = false">取消</v-btn>
      <v-btn flat color="primary" @click="saveDate()">确定</v-btn>
    </v-date-picker>
  </v-dialog>
  </div>
</template>

<script>
export default {
  name: 'dataPicker',
  data: function () {
    return {
      page: '',
      vdate: ''
    }
  },
  props: ['ui', 'title', 'date', 'rules'],
  methods: {
    saveDate () {
      this.$refs.page.save(this.vdate)
      this.$emit('upDate', this.vdate)
    },
    clearDate () {
      this.$refs.page.save(null)
      this.$emit('upDate', null)
    }
  },
  watch: {
    date () {
      this.vdate = this.date
    }
  }
}
</script>

<style scoped>

</style>
